<template>
<h1>单选组件</h1>
  <el-radio-group v-model="name">
    <el-radio-button label="张三"></el-radio-button>
    <el-radio-button label="李四"></el-radio-button>
    <el-radio-button label="王五"></el-radio-button>
  </el-radio-group>
  <h3>你选择的是:{{name}}</h3>
  <el-radio-group v-model="price">
    <!--  如果只有label属性时显示的内容和得到的内容是一样的,
          如果需要看到的和得到的不一样时,写在标签体内的是设置看到的内容,写在label里面的是得到的内容
     -->
    <el-radio-button v-for="item in arr" :label="item.price">{{item.title}}</el-radio-button>
  </el-radio-group>
  <h3>你选择的商品价格为:{{price}}</h3>
</template>

<script setup>
import {ref} from "vue";
const price = ref('');
const arr = ref([{title:"小米手机",price:3000},
  {title:"安踏拖鞋",price:100},
  {title:"联想笔记本",price:6000},
  {title:"罗技鼠标",price:300}
]);
const name = ref('');
</script>

<style scoped>

</style>